/* Main Banner */

	#Banner {
		padding: 0px;
		border-style: none;
		width: 100%;
		height: 152px;
		border-spacing: 0px;
	}
	
	#BannerIMG {
		max-width: 756px;
		margin-left: 8px;
		margin-right: 8px;
	}
	
	#BannerIMG img {
		width: 100%;
	}
	
	img.WideHouseIMG {
		width: 100%;
		height: auto;
		/*max-height: 550px;
		max-width: 100%;*/
	}
	
	img.NarrowHouseIMG {
		width: auto;
		height: auto;
		max-height: 550px;
		max-width: 100%;
	}
	
	/*             This is the banner picture            */
	td.bannerLeftEdgePic {background-image: url(images/bannerLeftEdge.jpg);}
		
	td.bannerRightEdgePic {background-image: url(images/bannerRightEdge.jpg);}
	/*                 End banner picture                */
	/* ------------------------------------------------- */
	/* This is the padding between the edge and the text */
	td.bannerLeftRightEdge {
		background-size: auto 143px;
		background-repeat: no-repeat;
		width: 77px;
	}
	/* End Padding */
	td.bannerLeft {
		background-image: url(images/bannerLeft.jpg);
		background-size: auto 143px;
		background-repeat: no-repeat;
		width: 470px;
	}
	
	/* Banner middle picture to fill in gaps */
	tr.bannerMiddle {
		height: 143px;
		background-image: url(images/bannerMiddle.jpg);
		background-size: auto 143px;
		background-repeat: repeat-x;
		width: 100%;
	}
	
	td.bannerMiddle {
		width: 100px;
		text-align: center;
	}
	
	td.bannerRight {
		background-image: url(images/bannerRight.jpg);
		background-size: auto 143px;
		background-repeat: no-repeat;
		width: 174px;
	}
	
	div.bannerLeft {width: 470px;}
		
	div.bannerRight {width: 174px;}
		
	div.bannerLeftRightEdge {width: 77px;}

	div.bannerLeftRightPad {width: 0px;}
	
	.bar {
		background-image: url(images/bar.jpg);
		background-repeat: repeat-x;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		text-align: left;
	}

/* End Main Banner */
/* --------------- */
/*    Main Body    */

	body {
		color: green;
		background-color: #66e067;
	}
	
	a:link {color: green;}
	
	a:visited {color: green;}
	
	link {color: green;}

/*  End Main Body   */
/* ---------------- */
/* Container Tables */

	/* This table is the invisible, first table designed to center the page */
	#main {
		width: 100%;
		text-align: center !important;
	}
	
	/* This table is the table that contains all of the elements and is visibly displayed */
	#mainTable {
		border: 1px inset green;
		padding: 8px;
		max-width: 756px; 
		margin-left: 8px;
		margin-right: 8px;
		/*background-color: #bbffbc; /*Old Color before stretched background image*/;
		background-color: #9af09b;
		background-image: url('images/gradient.png');
		background-repeat: no-repeat;
		background-repeat: repeat-x;
		background-size: 100% 100%;
		border-radius: 8px;
		border-spacing: 1px;
		text-align: center !important;
	}
	
	@media screen and (min-width: 772px) {
		#mainTable {
			margin-left: auto;
			margin-right: auto;
		}
		
		#BannerIMG {
			margin-left: auto;
			margin-right: auto;
		}
	}
	
	/* This table is the invisible, second main table to center, arrange, and align the elements on the main page */
	#secondMain {
		text-align: center !important;
	}

		/* These classes vertically align the elements to their top edges on the main page
		-- These elements are the navTables and main Pic */
		.sideContainer {vertical-align: top;}
		
		.middleContainer {vertical-align: top;}
		/* End These classes---------------------------- */
	
	#ultimateContainer {
		width: 100%;
		height: 100%;
		border: 1px solid black;
	}
	
	#ultimateInfoContainer {
		height: 100%;
		overflow: auto;
		border: 1px solid black;
	}

/* End Container Tables */
/* -------------------- */
/*       navTable       */
.hover {
	border-style: outset;
	border-width: 1px;
	border-color: green;
	text-decoration: underline;
	font-style: italic;
	background-color: #008000;
	color: #bbffbc;
	cursor: pointer;
	background-image: url('images/gradient4.png');
	background-repeat: no-repeat;
	background-repeat: repeat-x;
	background-size: 100% 100%;
	border-radius: 10px;
}


.tableTitle {
	background-color: #48b54a;
	color: black;
	font-weight: bold;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: green;	
	background-image: url('images/gradient2.png');
	background-repeat: no-repeat;
	background-repeat: repeat-x;
	background-size: 100% 100%;
}

.selected {
	border-style: outset;
	border-width: 1px;
	border-color: green;
	background-color: #66e067;
	font-weight: bold;
	background-image: url('images/gradient3.png');
	background-repeat: no-repeat;
	background-repeat: repeat-x;
	background-size: 100% 100%;
	border-radius: 10px;
}

.unselected {
	background-color: #bbffbc;
}

#picInfo {
	font-weight: bold;
	color: #3333FF;
}

.caption {
	border-style: inset;
	border-width: 1px;
	border-color: green;
	background-color: #66e067;
	font-weight: bold;
	font-size: 18pt;
	background-image: url('images/gradient3.png');
	background-repeat: no-repeat;
	background-repeat: repeat-x;
	background-size: 100% 100%;
	border-radius: 10px;
}

.border {
	box-shadow: 3px 3px 1px #6C9267;
	padding: 1px;
	border: 2px outset green;
	border-spacing: 1px;
	width: 114px;
	border-radius: 10px;
	text-align: center;
}

#pic {
	box-shadow: 8px 8px 5px #6C9267;
	border: 5px ridge green;
	width: 417px;
	margin-right: 8px;
	margin-left: 8px;
}

p {font-size: 16px;}

p.center {text-align: center;}

div.message {
	width: 500px;
}


.b4andaftercell {
	/*border-width: 2px;
	border-color: green;
	border-top-style: outset;
	border-right-style: outset;
	border-left-style: outset;*/
}

.b4andafterPic {
	box-shadow: 8px 8px 5px #6C9267;
	border: 5px ridge green;
	width: 417px;
	margin-right: 8px;
	margin-left: 8px;
}

.b4andafterDesc {
	padding-top: 15px;
	padding-bottom: 20px;
}

.inputPicDesc {
	border: thin inset #C0C0C0;
	width: 100%;
	text-overflow: ellipsis;
	resize: vertical;
	word-wrap: break-word;
}

h1 {
	text-shadow: 1px 2px 3px #475E46;
}